<script lang="ts" setup>
	//添加收货地址
	import { reactive, ref } from 'vue'
	// import city from '@/sheng_shi_xian_data.json'
	import {
		onLoad,
		onReachBottom,
		onUnload
	} from '@dcloudio/uni-app';
	import {
		useRouter
	} from 'uni-mini-router'
	import {
		getCurrentInstance
	} from 'vue'
	import {
		userStore
	} from '@/pinia';

	const userStoreInfo = userStore();
	
	const {
		proxy,
	} = getCurrentInstance()
	
	const state = reactive({
		pageUrl:''
	})
	let router = useRouter()
	onLoad((option) => {
		console.log(option);
		if (option.id) {
			navTit.value = '编辑地址'
			editId.value = option.id
			getEditDetail()
		} else if(option.pageUrl){ //这个是短时工过来添加的逻辑
			state.pageUrl = option.pageUrl
			navTit.value = '添加'
			getAddressTree()
		}else {
			getAddressTree()
		}
	})
	let navTit = ref('添加地址')
	let editId = ref(null)
	let formA = ref({
		name: '',
		phone: '',
		address: '',
		addressDetail: ''
	})
	let radiovalue = ref('')
	const checkboxChange = (e) => {
		radiovalue.value = e
		console.log(radiovalue.value);
	}
	let checkboxList1 = reactive([{
		name: '设为默认收货地址',
	}])
	let radiovalue2 = ref('')
	const checkboxChange2 = (e) => {
		radiovalue2.value = e
		console.log(radiovalue2.value);
	}
	let checkboxList2 = reactive([{
		name: '设为默认退货地址',
	}])
	let addressThree = ref([])
	const addressChecked = (e) => {
		//选择地址
		console.log(e);
		addressThree.value = e.detail.value
		formA.value.address = e.detail.value[0].text + e.detail.value[1].text + e.detail.value[2].text
	}
	let city = ref([])
	const getAddressTree = () => {
		//获取地区
		proxy.$req('GET', proxy.$api.getAddressTree, {}).then((res) => {
			city.value = res.result
		})
	}
	const getEditDetail = () => {
		//获取详情编辑
		proxy.$req('GET', proxy.$api.addressDetail, {
			id: editId.value
		}).then((res) => {
			console.log(res);
			formA.value.name = res.result.realName
			formA.value.phone = res.result.phone
			addressThree.value.push({ text: res.result.province })
			addressThree.value.push({ text: res.result.city })
			addressThree.value.push({ text: res.result.district })
			addressThree.value[2].value = res.result.cityId
			formA.value.address = res.result.province + res.result.city + res.result.district
			formA.value.addressDetail = res.result.detail
			radiovalue.value = res.result.isDefault == 1 ? ['设为默认收货地址'] : ''
			radiovalue2.value = res.result.isReturn == 1 ? ['设为默认退货地址'] : ''
			getAddressTree()
		})
	}
	const addAddress = () => {
		if (!formA.value.name) {
			uni.showToast({
				title: '请输入姓名',
				icon: 'none'
			})
			return
		}

		if (!formA.value.phone) {
			uni.showToast({
				title: '请输入手机号',
				icon: 'none'
			})
			return
		}
		if (!formA.value.address) {
			uni.showToast({
				title: '请选择地址',
				icon: 'none'
			})
			return
		}
		if (!formA.value.addressDetail) {
			uni.showToast({
				title: '请输入详细地址',
				icon: 'none'
			})
			return
		}
		
		let url = ''
		let params = {}
		if(state.pageUrl == 'employWorkerDetails'){
			console.log(userStoreInfo.userInfo.id,userStoreInfo,'userStoreInfo.userInfo.id')
			url = proxy.$api.meiyeShortWorkerAddressCommonAdd
			params = {
				shortWorkerEmpId:userStoreInfo.userInfo.id,
				provinceId:addressThree.value[0].value,
				cityId:addressThree.value[1].value,
				areaId: addressThree.value[2].value,
				username:formA.value.name,
				phone:formA.value.phone,
				address:formA.value.addressDetail
			}
		}else{
			url = proxy.$api.addShouhuo
			params = {
				memberId: userStoreInfo.userInfo.id,
				realName: formA.value.name,
				phone: formA.value.phone,
				province: addressThree.value[0].text,
				city: addressThree.value[1].text,
				district: addressThree.value[2].text,
				cityId: addressThree.value[2].value,
				detail: formA.value.addressDetail,
				isDefault: radiovalue.value.length > 0 ? 1 : 0,
				isReturn: radiovalue2.value.length > 0 ? 1 : 0,
			}
		}
		
		//新增地址 
		proxy.$req('POST', url, params).then((res) => {
			console.log(res);
			uni.showToast({
				title: res.message,
				icon: 'none'
			})
			uni.navigateBack()
			if(state.pageUrl == 'employWorkerDetails'){
				uni.$emit('updataAddress', params)
			}else{
				uni.$emit('updataAddress',{} )
			}
			
		})
	}
	const editAddress = () => {
		//编辑地址
		proxy.$req('POST', proxy.$api.editAddress, {
			id: editId.value,
			memberId: userStoreInfo.userInfo.id,
			realName: formA.value.name,
			phone: formA.value.phone,
			province: addressThree.value[0].text,
			city: addressThree.value[1].text,
			district: addressThree.value[2].text,
			cityId: addressThree.value[2].value,
			detail: formA.value.addressDetail,
			isDefault: radiovalue.value.length > 0 ? 1 : 0,
			isReturn: radiovalue2.value.length > 0 ? 1 : 0,
		}).then((res) => {
			uni.showToast({
				title: res.message,
				icon: 'none'
			})
			uni.navigateBack()
			uni.$emit('updataAddress', {})
		})
	}
	// const deleteAddress = () => {
	// 	//删除地址
	// 	proxy.$req('GET', proxy.$api.deleteShouhuo, {
	// 		id: ''
	// 	}).then((res) => {

	// 	})
	// }
</script>
<template>
	<u-navbar :placeholder="true" :title="navTit" :autoBack="true">
		<!-- <template #right>
			删除
		</template> -->
	</u-navbar>
	<view class="formBox">
		<u--form labelPosition="left" :model="formA" ref="form" labelWidth="150rpx">
			<u-form-item :label="state.pageUrl=='employWorkerDetails'?'姓名':'收货人'">
				<u--input style="padding:0 30rpx;" class="input" v-model="formA.name" border="none" disabledColor="#fff"
					:placeholder="state.pageUrl=='employWorkerDetails'?'请输入姓名':'请输入收货人姓名'"></u--input>
			</u-form-item>
			<u-form-item class="formItem" label="手机号码">
				<u--input style="padding:0 30rpx;" class="input" type="number" v-model="formA.phone" border="none"
					disabledColor="#fff" placeholder="请输入手机号码"></u--input>
			</u-form-item>
			<!-- <u-form-item class="formItem" label="所在地区">
				<u--input style="padding:0 30rpx;" class="input" v-model="formA.num" border="none" disabledColor="#fff"
					placeholder="请输入所在地区"></u--input>
			</u-form-item> -->
			<u-form-item class="formItem" label="地址" prop="companyAddress">
				<uni-data-picker class="input" v-model="formA.address" :localdata="city" popup-title="请选择" :map="{
					text:'name',
					value:'id',
				}" @change="addressChecked">
					<view :style="{color:formA.address?'#333':'rgba(0,0,0,0.25)'}">
						{{formA.address?formA.address:'请选择' }}
					</view>
				</uni-data-picker>
			</u-form-item>
			<u-form-item class="formItem" label="详细地址">
				<u--textarea style="padding:20rpx 30rpx;box-sizing: border-box;" class="textarea" border="none"
					v-model="formA.addressDetail" placeholder="请输入详细地址"></u--textarea>
			</u-form-item>
		</u--form>

		<view class="payWay" v-if="userStoreInfo.userFlag!=2 && !state.pageUrl">
			<u-checkbox-group v-model="radiovalue" placement="column" @change="checkboxChange">
				<view class="r-flex-between-center pwItem" v-for="(item, index) in checkboxList1" :key="index">
					<view class="r-flex-center-center">
						<text>{{ item.name }}</text>
					</view>
					<u-checkbox :customStyle="{marginBottom: '8px'}" shape="circle" activeColor="#CB645E"
						:name="item.name">
					</u-checkbox>
				</view>
			</u-checkbox-group>
		</view>
		<view class="payWay" v-if="userStoreInfo.userFlag==2">
			<u-checkbox-group v-model="radiovalue2" placement="column" @change="checkboxChange2">
				<view class="r-flex-between-center pwItem" v-for="(item, index) in checkboxList2" :key="index">
					<view class="r-flex-center-center">
						<text>{{ item.name }}</text>
					</view>
					<u-checkbox :customStyle="{marginBottom: '8px'}" shape="circle" activeColor="#CB645E"
						:name="item.name">
					</u-checkbox>
				</view>
			</u-checkbox-group>
		</view>
	</view>
	<view class="addBox">
		<view class="addAddress" v-if="editId!=null" @click="editAddress">
			编辑
		</view>
		<view class="addAddress" v-else @click="addAddress">
			保存
		</view>
	</view>
</template>
<style lang="scss">
	.addBox {
		width: 750rpx;
		height: 164rpx;
		background: #FFFFFF;

		position: fixed;
		bottom: 0;
		padding: 30rpx;
		box-sizing: border-box;

		.addAddress {
			width: 686rpx;
			height: 88rpx;
			background: #CB645E;
			border-radius: 16rpx;
			line-height: 88rpx;
			text-align: center;
			margin: auto;
			color: white;
			font-size: 32rpx;
			font-family: PingFangSC-Medium, PingFang SC;
			font-weight: 500;
			color: #FFFFFF;
		}
	}

	.formBox {
		width: 686rpx;
		margin: 0 auto;

		.input {
			width: 500rpx;
			height: 96rpx;
			background: #F7F7F7;
			border-radius: 16rpx;
			padding-left: 20rpx;
			box-sizing: border-box;
			line-height: 96rpx;

		}

		.textarea {
			width: 500rpx;
			height: 176rpx;
			background: #F7F7F7;
			border-radius: 16rpx;
			box-sizing: border-box;

		}

		.formItem {
			// height: 100rpx;
			// border-bottom: 1rpx solid #d4d4d4;
		}
	}

	.payWay {
		width: 686rpx;
		padding: 20rpx 0;

		.pwItem {
			height: 100rpx;
		}
	}

	.save {
		width: 600rpx;
		margin: 90rpx auto;
		height: 100rpx;
		line-height: 100rpx;
		text-align: center;
		background-color: #e7e7e7;
	}
</style>